<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="css/base.css" />
	</head>

	<body>
		<table id="list" lay-filter="test" class="layui-table"></table>

		<!--弹出框-->
		<div id="modal"></div>

		<!--列表顶部添加按钮-->
		<script type="text/html" id="tpl_add_btn">
			<a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
		</script>

		<!--列表右侧编辑删除按钮模板-->
		<script type="text/html" id="tpl_manipulation_btn">
			<a class="layui-btn layui-btn-xs" lay-event="edit">
				<i class="layui-icon layui-icon-edit"></i> 编辑
			</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
				<i class="layui-icon layui-icon-delete"></i> 删除
			</a>
		</script>

		<script type="text/html" id="tpl_form">
			<form class="layui-form layui-form-pane" style="padding:20px;">
				<div class="layui-form-item">
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-block">
						<input type="text" name="class_name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input" value="{{class_name}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">父级id</label>
					<div class="layui-input-block">
						<input type="text" name="fid" required lay-verify="number" placeholder="请输入密码" autocomplete="off" class="layui-input" value="{{fid}}">
					</div>
				</div>
				<input type="hidden" name="class_id" value="{{class_id}}" />
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</script>

		<script src="layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/template-web.js"></script>

		<script>
			layui.use(['form', 'laypage', 'layer', 'table'], function() {
				var laypage = layui.laypage, //加载分页模板
					layer = layui.layer, //弹窗模板
					form = layui.form, //表单模板
					$ = layui.jquery,
					table = layui.table; //表格模板

				var formType = "";

				$(function() {
					table_reder();
				})

				function table_reder() {
					table.render({
						elem: "#list",
						url: "/product_class/list",
						cols: [
							[{
								field: 'class_id',
								title: "编号",
								width: 70,
								sort: true
							}, {
								field: 'class_name',
								title: "分类名称"
							}, {
								field: 'fid',
								title: "父级id",
								width: 90,
								sort: true
							}, {
								field: 'right',
								title: "操作",
								width: 200,
								align: 'center',
								toolbar: "#tpl_manipulation_btn"
							}]
						],
						page: true,
						toolbar: '#tpl_add_btn'
					});
				}

				//右侧工具栏监听
				table.on('tool(test)', function(obj) {
					var data = obj.data, //获得当前行数据
						layEvent = obj.event, //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						tr = obj.tr, //获得当前行 tr 的DOM对象
						class_id = data.class_id;

					if(layEvent == "edit") {
						formType = "edit";
						$.ajax({
							type: "GET",
							url: "/product_class/details",
							data: {
								class_id: class_id
							},
							dataType: "JSON",
							success: function(data) {
								$("#modal").empty().append(template("tpl_form", data[0]));
								var content = $("#modal").html();
								layer.open({
									type: 1,
									title: "修改商品类别",
									offset: '20%',
									area: "30%",
									shade: 0.6,
									closeBtn: 1,
									shadeClose: true,
									anim: 1, //弹出动画样式
									skin: 'layui-layer-molv',
									scrollbar: false,
									content: content
								});
								//渲染模板
								form.render();
							}
						})
					} else if(layEvent == "del") {
						/***********************/
						layer.confirm('确定要删除么？', function(index) {
							$.ajax({
								type: "GET",
								url: "/product_class/delete",
								data: {
									class_id: class_id
								},
								dataType: "JSON",
								success: function(data) {
									layer.close(layer.index);
									if(data.code == 400) {
										layer.open({
											title: "警告警告！！！！",
											content: "该分类下还有商品并未删除<br/>是否要继续删除分类并清空该分类下所有商品?<br/>删除之后不可恢复！！！！！",
											skin: "my-layer-warning",
											btn: ['继续删除', '关闭'],
											yes: function(index, layero) {
												$.ajax({
													type: "GET",
													url: "/product_class/del_all",
													data: {
														class_id: class_id
													},
													dataType: "JSON",
													success: function(result) {
														layer.close(layer.index);
														obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
														layer.msg('删除成功', {
															icon: 1
														});
													}
												})
											}
										})
									} else if(data.code == 200) {
										obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
										layer.msg('删除成功', {
											icon: 1
										});
									}
								}
							})
							//向服务端发送删除指令
						});
					};
				})

				//头部按钮监听事件
				table.on("toolbar(test)", function(obj) {
					switch(obj.event) {
						case "add":
							formType = "add";
							$("#modal").empty().append(template("tpl_form", ""));
							var content = $("#modal").html();
							layer.open({
								type: 1,
								title: "添加用户",
								offset: '20px',
								area: "40%",
								shade: 0.6,
								closeBtn: 1,
								shadeClose: true,
								anim: 1,
								skin: 'layui-layer-molv',
								scrollbar: false,
								content: content
							});
							//渲染模板
							form.render();
							break;
					};
				})

				//表单监听事件
				form.on('submit(*)', function(data) {
					console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
					console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
					console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
					//确认路径
					var url;
					if(formType == "add") {
						url = "/product_class/add";
					} else if(formType == "edit") {
						url = "/product_class/update"
					}

					$.ajax({
						type: "POST",
						url: url,
						data: data.field,
						dataType: "JSON",
						success: function(result) {
							if(result.code == 200) {
								//关闭弹出层
								layer.close(layer.index);
								layer.msg('存入信息成功', {
									icon: 1
								});
								table_reder();
							} else {
								alert(result.msg);
							}
						}
					})

					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可
				})

			})
		</script>
	</body>

</html>